<template>
  <div class="IndexList" id="IndexList">
      <div class="IndexListType">
        <el-menu :default-active="1" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1">推荐帖子</el-menu-item>
        </el-menu>
      </div>
      <div class="IndexListCont" style="overflow:auto">
        <ul>
          <li v-for="(list, i) in list" :key="i">
            <div class="ListItem">
              <div class="ListItem-Name">
                <img :src="list.poster_logo" class="posterIcon"/>
                <router-link class ="PosterName" :to="{}">{{list.poster_name}}</router-link>
                <a href="javascript:;" class="Indexlist_join" @click="ConcernPoster(list.poster_id, i)" v-show="!list.poster_is_joined"><span><el-button type="warning" round size="mini">关注</el-button></span></a>
                <a href="javascript:;" class="Indexlist_ujoin" @click="UnconcernPoster(list.poster_id, i)"  v-show="list.poster_is_joined"><span><el-button type="primary" round size="mini">已关注</el-button></span><span><el-button type="danger" round size="mini">取关</el-button></span></a>
              </div>
              <div class="ListItem-Title">
                <router-link :to="`/Detail/${list.id}`">{{list.title}}</router-link>
              </div>
              <div class="ListItem-Detail">
                  <h5 class="ListItem-Detail-text" v-html="list.text"></h5>
                  <div class="ListItem-Detail-img">
                      <div class="JDICont">
                         <div class="imgList" v-for="(img, index) in list.image" :key="index" @click="ShowBigPic($event,index,i)" >
                            <div class="imgfd"></div>
                            <img :src="img" alt="点击加载图片"/>
                         </div>
                      </div>
                      <div class="List-Large" v-if="list.image != ''" v-show="list.flag">
                        <div class="LargeHd"><a href="javascript:;" @click="hidePic($event,i)"><i></i>收起</a> </div>
                        <div class="LargeWarp">
                            <div :class="['LargeWarpList',{none: 0 != index }]" v-for="(img, index) in list.image" :key="index">
                              <div class="LargePrev" v-if="index != 0" @click="LargePrev(index,i)"></div>
                              <div class="Largesx" @click="hidePic($event,i)"></div>
                              <img :src="img" alt="刷新查看" />
                              <div class="LargeNext" v-if="list.image.length-1 != index" @click="LargeNext(index,i)"></div>
                            </div>
                        </div>
                      </div>
                  </div>
              </div>
              <div class="ListItem-Info">
                  <div class="PostInfo">
                      <a href="javascript:;">
                          <el-tag>{{list.tag}}</el-tag>
                      </a>
                      <span class="PostInfo-time" :title="list.created_at">{{list.created_at}}</span>
                     <span class="PostInfo-comment"><img src="../images/icon6_hover.png"/>{{list.comment_count}}</span>
                  </div>
              </div>
            </div>
          </li>       
        </ul>

        </div>
        <div class="drownbox">
           <span :class="{goDrown : drownReflush === true}" v-show="drownReflushText">{{drownReflush === true ? '' : '没有更多了'}}</span>
            <div :class="['spinner8',{none:load === false}]">
              <div class="spinner-container container1">
                <div class="circle1">&nbsp;</div>
                <div class="circle2">&nbsp;</div>
                <div class="circle3">&nbsp;</div>
                <div class="circle4">&nbsp;</div>
              </div>
              <div class="spinner-container container2">
                <div class="circle1">&nbsp;</div>
                <div class="circle2">&nbsp;</div>
                <div class="circle3">&nbsp;</div>
                <div class="circle4">&nbsp;</div>
              </div>
              <div class="spinner-container container3">
                <div class="circle1">&nbsp;</div>
                <div class="circle2">&nbsp;</div>
                <div class="circle3">&nbsp;</div>
                <div class="circle4">&nbsp;</div>
              </div>
            </div>
            </div>
      </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'IndexList',
  components: {
  },
  watch: {
    currentPage: 'requestData',
    list: {
    }
  },
  ready () {
    this.requestData()
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  data () {
    return {
      list: [],
      posterId: '',
      currentPage: 1,
      pageSize: 2,
      totalCount: 7,
      currentCount: 0,
      drownReflushText: true,
      drownReflush: true,
      load: false,
    }
  },
  methods: {
    ConcernPoster: function (PosterId, temp) {

        this.ConcernState(PosterId, 'join', temp)
    
    },
    UnconcernPoster: function (PosterId, temp) {
        this.ConcernState(PosterId, 'quit', temp)
      
    },
    //修改关注状态的函数
    ConcernState: function (PosterId,  flag, temp) {
        if (flag === 'join') {
          this.list[temp].poster_is_joined = true
        } else if (flag === 'quit') {
          this.list[temp].poster_is_joined = false
        }
    },
    handleScroll: function () {
      this.scrolled = window.scrollY
      if (this.currentCount < this.totalCount) {
        if (this.scrolled >= document.documentElement.scrollHeight - 800) { // 下拉刷新
          this.load = true
          this.drownReflushText = false
          this.ShowHtml(++this.currentPage)

        }
      } else { // 没有 择显示没有了
        this.load = false
        this.drownReflush = false
        this.drownReflushText = true
      }
    },
    hidePic: function (event, temp) {
      this.list[temp]['flag'] = false
    },
    LargeNext: function (index, temp) { // 缩略图
      this.list[temp]['showindex'] = index + 1
    },
    LargePrev: function (index, temp) {
      this.list[temp]['showindex'] = index - 1
    },
    ShowBigPic: function (event, index, temp) {
      this.list[temp].flag = true
      this.list[temp]['showindex'] = index
    },
    ShowHtml: function (currentPage) {
      var that = this
      axios({
        method: 'post',
        baseURL: '/api',
        url: '/posts/postnumber',      
        dataType: 'jsonp',
        headers: { 'Access-Control-Allow-Origin':'*' },
        responseType: 'json',
        data:{},
        timeout: 100000
      }).then(function (response) {
        that.totalCount = response.data.data.number;
      })
      var currentPage2 = currentPage
      var tag2= ""
      var sorted = ""
      var dataUrl = '/posts/homepages?currentPage=' + currentPage2 + '&tag=' + tag2 + '&sorted=' + sorted +''
      axios({
        method: 'post',
        baseURL: '/api',
        url: dataUrl,      
        dataType: 'jsonp',
        headers: { 'Access-Control-Allow-Origin':'*' },
        responseType: 'json',
        // data:{
        //   currentPage: 1,
        //   tag:"",
        //   sorted:""
        // },
        timeout: 100000
      }).then(function (response) {
          var resData = response.data.data
          that.pageSize = resData.pagesize
          that.currentCount += resData.pagesize
          var list = resData.list
          for (var i in list) {
            list[i]["flag"] = false;
            list[i]["showindex"] = 0;
            that.list.push(list[i]);
          }
        
      })
    }
  },
  created: function () {
    //this.posterId = this.$route.params.posterId;
    window.addEventListener("scroll", this.handleScroll);
    var that = this
    axios({
      method: 'post',
      baseURL: '/api',
      url: '/posts/postnumber',      
      dataType: 'jsonp',
      headers: { 'Access-Control-Allow-Origin':'*' },
      responseType: 'json',
      data:{},
      timeout: 100000
    }).then(function (response) {
      that.totalCount = response.data.data.number;
    })
    var currentPage2 = 1
    var tag2= this.$route.params.tag
    console.log(this.$route.params.tag)
    if(tag2=='n'){
      tag2 = ''
    }
    var sorted = ""
    var dataUrl = '/posts/homepages?currentPage=' + currentPage2 + '&tag=' + tag2 + '&sorted=' + sorted +''
    axios({
      method: 'post',
      baseURL: '/api',
      url: dataUrl,      
      dataType: 'jsonp',
      headers: { 'Access-Control-Allow-Origin':'*' },
      responseType: 'json',
      // data:{
      //   currentPage: 1,
      //   tag:"",
      //   sorted:""
      // },
      timeout: 100000
    }).then(function (response) {
        var resData = response.data.data
        that.pageSize = resData.pagesize
        that.currentCount += resData.pagesize
        var list = resData.list
        var newList = []
        for (var i in list) {
          list[i]["flag"] = false;
          list[i]["showindex"] = 0;
          newList.push(list[i]);
        }
        that.list = newList
      
    })

    axios({
      method: 'post',
      baseURL: '/api',
      url: 'user/authorize',      
      dataType: 'jsonp',
      headers: { 'Access-Control-Allow-Origin':'*' },
      responseType: 'json',timeout: 100000
    }).then(function (response) {
        console.log(response)
    })
  }
}
</script>
<style scoped>
@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

.IndexList {
  width: 700px;
  padding: 17px 0 33px;
  overflow: hidden;
}

.IndexList .IndexListType {
  width: 100%;
  top: 0;
  z-index: 3;
  background: #fff;
  padding-left: 10px;
}

.IndexList .IndexListCont {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.IndexList .IndexListCont li {
  position: relative;
  min-height: 72px;
  padding: 30px 19px;
  border-bottom: 3px solid #e6e7eb;
  list-style:none;
}

.IndexList .IndexListCont li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  background-color: rgba(164, 168, 195, 0.5);
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  transition: all 0.8s;
}

.IndexList .IndexListCont li .ListItem {
  position: relative;
  height: auto;
  width: 100%;
  z-index: 1;
}

.IndexList .IndexListCont li .ListItem-Title {
  width: 100%;
  height: 30px;
  text-align: left;
}

.IndexList .IndexListCont li .ListItem-Title a, .IndexList .IndexListCont li .ListItem-Title i {
  display: inline-block;
}

.IndexList .IndexListCont li .ListItem-Title a {
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  color: rgb(0, 80, 151);
  margin-right: 5px;
  text-decoration: none;
}

.IndexList .IndexListCont li .ListItem-Title a:hover {
  text-decoration:underline
}

.IndexList .IndexListCont li .ListItem-Name {
  height: 40px;
  line-height: 40px;
  width: 100%;
  margin-bottom: 15px;
  text-align: left;
}

.IndexList .IndexListCont li .ListItem-Name .Indexlist_join, .IndexList .IndexListCont li .ListItem-Name .Indexlist_ujoin {
  width: 62px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
}

.IndexList .IndexListCont li .ListItem-Name .Indexlist_join {
  color: #fff;
}

.IndexList .IndexListCont li .ListItem-Name .Indexlist_join img {
  margin-right: 5px;
}

.IndexList .IndexListCont li .ListItem-Name .Indexlist_ujoin span:first-child {
  display: inline-block;
}

.IndexList .IndexListCont li .ListItem-Name .Indexlist_ujoin span:last-child {
  display: none;
}

.IndexList .IndexListCont li .ListItem-Name .Indexlist_ujoin:hover span:first-child {
  display: none;
}

.IndexList .IndexListCont li .ListItem-Name .Indexlist_ujoin:hover span:last-child {
  display: inline-block;
}

.IndexList .IndexListCont li .ListItem-Name .posterIcon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
  margin-bottom: -10px;
}

.IndexList .IndexListCont li .ListItem-Name .PosterName {
  font-size: 14px;
  color: #404040;
  font-weight: bold;
  margin-right: 7px;
  text-decoration: none;
}

.IndexList .IndexListCont li .ListItem-Name .PosterName:hover {
  color: #0099e5;
}

.IndexList .IndexListCont li .ListItem-Detail {
  width: 100%;
  min-height: 27px;
  margin-bottom: 10px;
  overflow: hidden;
}

.IndexList .IndexListCont li .ListItem-Detail .ListItem-Detail-text {
  font-size: 14px;
  color: #a7a7a7;
  max-height: 30px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
  text-align: left;
  margin-top: -1px;
}

.IndexList .IndexListCont li .ListItem-Detail .ListItem-Detail-text p {
  font-size: 14px !important;
  color: #a7a7a7 !important;
}

.IndexList .IndexListCont li .ListItem-Detail .ListItem-Detail-img {
  position: relative;
  width: 100%;
}

.IndexList .IndexListCont li .ListItem-Detail .ListItem-Detail-img .JDICont {
  position: relative;
  z-index: 4;
  max-height: 110px;
  width: 100%;
  overflow: hidden;
  text-align: left;
}

.IndexList .IndexListCont li .ListItem-Detail .imgList {
  position: relative;
  display: inline-block;
  max-width: 156px;
  height: 110px;
  overflow: hidden;
  margin-right: 10px;
}

.IndexList .IndexListCont li .ListItem-Detail .imgList .imgfd {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background: transparent url(../images/icon-max.png) no-repeat center;
}

.IndexList .IndexListCont li .ListItem-Detail .imgList:hover .imgfd {
  display: inline-block;
}

.IndexList .IndexListCont li .ListItem-Detail .imgList img {
  display: inline-block;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  max-height: 100%;
}

.IndexList .IndexListCont li .ListItem-Info {
  width: 100%;
  height: 20px;
}

.IndexList .IndexListCont li .ListItem-Info .PostInfo {
  min-width: 160px;
  max-width: 400px;
  text-align: left;
}

.IndexList .IndexListCont li .ListItem-Info .PostInfo a {
  display: inline-block;
  position: relative;
  line-height: 20px;
  font-size: 12px;
  color: #666666;
  text-decoration: none;
  
}

.IndexList .IndexListCont li .ListItem-Info .PostInfo img {
  position: relative;
  top: 4px;
  display: inline;
  width: 15px;
  height: 15px;
  padding-right: 1px;
}

.IndexList .IndexListCont li .ListItem-Info .PostInfo .PostInfo-time {
  font-size: 12px;
  color: #a7a7a7;
  border-left: 1px solid #eeeeee;
  margin-left: 5px;
  padding-left: 10px;
}

.IndexList .IndexListCont li .ListItem-Info .PostInfo .PostInfo-comment {
  font-size: 12px;
  color: #a7a7a7;
  border-left: 1px solid #eeeeee;
  margin-left: 5px;
  padding-left: 10px;
}

.IndexList .IndexListCont li .ListItem-Info .JdataInfo {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #a7a7a7;
  margin-top: 4px;
}

.IndexList .IndexListCont li .ListItem-Info .JdataInfo span {
  margin-right: 20px;
}

.IndexList .IndexListCont li .ListItem-Info .JdataInfo span img {
  margin-right: 5px;
}

.IndexList .List-Large {
  position: relative;
  margin-top: -110px;
  width: 632px;
  min-height: 100px;
  padding: 10px;
  background: #f7f7f7;
  border: 1px solid #e4e6eb;
  z-index: 5;
  cursor: normal;
}

.IndexList .List-Large .LargeHd {
  height: 25px;
  width: 100%;
  border-bottom: 1px solid #e4e6eb;
  text-align: left;
}

.IndexList .List-Large .LargeHd a {
  float: left;
  font-size: 12px;
  color: #2d64b3;
  text-align: left;
  box-sizing: content-box;
}

.IndexList .List-Large .LargeHd a i {
  display: inline-block;
  position: relative;
  top: -1px;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: url(../images/thread_list_z_eca48fe.png);
  background-position: 0px -30px;
}

.IndexList .List-Large .LargeWarp {
  position: relative;
  width: 632px;
  height: 90%;
  padding: 1% 0;
  margin-top: 10px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.IndexList .List-Large .LargeWarp img {
  display: inline-block;
  max-width: 100%;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.IndexList .List-Large .LargeWarp .Largesx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.IndexList .List-Large .LargeWarp .Largesx:hover {
  cursor: normal;
  background: rgba(0, 0, 0, 0.05) url(../images/icon-mini.png) no-repeat center;
}

.IndexList .List-Large .LargeWarp .LargeWarpList {
  position: relative;
  margin-top: 10px;
  overflow: hidden;
  width: 632px;
}

.IndexList .List-Large .LargeWarp .LargeNext,
.IndexList .List-Large .LargeWarp .LargePrev {
  position: absolute;
  top: 0;
  width: 20%;
  height: 100%;
  cursor: pointer;
  z-index: 6;
}

.IndexList .List-Large .LargeWarp .LargePrev {
  left: 0;
}

.IndexList .List-Large .LargeWarp .LargePrev:hover {
  background: rgba(0, 0, 0, 0.01) url(../images/icon-left.png) no-repeat center;
}

.IndexList .List-Large .LargeWarp .LargeNext {
  right: 0;
}

.IndexList .List-Large .LargeWarp .LargeNext:hover {
  background: rgba(0, 0, 0, 0.01) url(../images/icon-right.png) no-repeat center;
}


.drownbox {
  width: 100%;
  margin: 30px auto 0;
  height: 60px;
  text-align: center;
}
.drownbox span {
  width: 80px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  font-size: 14px;
  font-family: "Microsoft YaHei";
  color: gray;
}
.goDrown {
  padding-right: 10px;
  background: url(../images/icon18.png) no-repeat center right;
}

.spinner8 {
  margin: 0 auto;
  width: 60px;
  height: 60px;
  position: relative;
}


.container1 > div, .container2 > div, .container3 > div {
  width: 16px;
  height: 16px;
  background-color: #0099fe;
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


.spinner8 .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}


.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}


.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}


.circle1 {
  top: 0;
  left: 0;
}


.circle2 {
  top: 0;
  right: 0;
}


.circle3 {
  right: 0;
  bottom: 0;
}


.circle4 {
  left: 0;
  bottom: 0;
}


.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}


.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}


.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}


.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}


.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}


.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}


.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}


.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}


.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}


.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}


.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  40% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

</style>
